<template>
	<div class="container">
		<el-card
			class="w-860px h-191px"
			style="margin: 0 auto; margin-top: 35px"
			shadow="hover"
		>
			<el-row :gutter="20">
				<el-col :span="4">
					<el-avatar :size="80" :src="state.userInfo.profile" />
				</el-col>
				<el-col :span="10">
					<span class="tag">账号：{{ state.userInfo.userName }}</span>
					<span class="tag">毕业学校：{{ state.userInfo.university }}</span>
				</el-col>
				<el-col :span="10">
					<span class="tag">您的爱好：{{ state.userInfo.post }} </span>
					<span style="color: red">工资：{{ state.userInfo.salary }}</span>
				</el-col>
			</el-row>
			<template #footer>
				<el-button :icon="User" @click="state.dialogVisible = true"
					>修改密码</el-button
				>
				<el-button :icon="Promotion" @click="logout">退出登录</el-button>
			</template>
		</el-card>

		<el-dialog
			v-model="state.dialogVisible"
			title="信息修改"
			width="50%"
			draggable
		>
			<el-form
				ref="ruleFormRef"
				:rules="rules"
				:model="state.userInfo"
				label-width="auto"
				style="max-width: 600px"
			>
				<el-form-item label="账号" prop="userName">
					<el-input v-model="state.userInfo.userName" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" show-password  v-model="state.userInfo.password" />
				</el-form-item>
				<el-form-item label="昵称" prop="nickName">
					<el-input v-model="state.userInfo.nickName" />
				</el-form-item>
				<el-form-item label="头像" prop="profile">
					<div>
						<el-upload class="avatar-uploader"
											 action="http://ordinary.jimostudio.link:26451/api/upload?type=10&projectName=anime"
											 :show-file-list="false" :on-success="handleAvatarSuccess">
							<img v-if="state.userInfo.profile" :src="state.userInfo.profile" class="avatar"/>
							<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="工资" prop="salary">
					<el-input v-model="state.userInfo.salary" />
				</el-form-item>
				<el-form-item label="毕业学校" prop="university">
					<el-input v-model="state.userInfo.university" />
				</el-form-item>
				<el-form-item label="您的爱好" prop="post">
					<el-input v-model="state.userInfo.post" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="update(ruleFormRef)">提交</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { Promotion, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import type { UploadProps } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
import type { FormInstance, FormRules } from 'element-plus'
const UserLogin = userLogin()
const router = useRouter()
const state = reactive(<any>{
	imgPath: '',
	dialogVisible: false,
	userInfo: {},
})
const rules = reactive<FormRules>({
	username: [
		{
			required: true,
			message: '账号不能为空',
			trigger: 'change',
		},
	],
	password: [
		{
			required: true,
			message: '密码不能为空',
			trigger: 'change',
		},
	],
	password2: [
		{
			required: true,
			message: '二次密码不能为空',
			trigger: 'change',
		},
	],
	nickName: [
		{
			required: true,
			message: '用户昵称不能为空',
			trigger: 'change',
		},
	],
	salary: [
		{
			required: true,
			message: '工资不能为空',
			trigger: 'change',
		},
	],
	university: [
		{
			required: true,
			message: '毕业学校不能为空',
			trigger: 'change',
		},
	],
	profile: [
		{
			required: true,
			message: '头像不能为空',
			trigger: 'change',
		},
	],
	post: [
		{
			required: true,
			message: '岗位不能为空',
			trigger: 'change',
		},
	],
})

function init() {
	state.imgPath = import.meta.env.VITE_API_BASE_URL + '/api/upload'
	http.get('/user/userInfo').then((res) => {
		state.userInfo = res.data
		state.userInfo.password = null
	})
}

/**
 * 文件上传
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile,) => {
	state.userInfo.profile = response.data.path
}

/**
 * 修改密码
 */
const update = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			http.post('/user/update', state.userInfo).then((res) => {
				toast.success('修改成功')
				state.dialogVisible = false
				if (
					state.userInfo.password !== '' ||
					state.userInfo.password !== null
				) {
					toast.success('密码修改成功，请重新登录')
					window.location.href = '/login'
				}
			})
		}
	})
}

/**
 * 退出登录
 */
function logout() {
	http.post('/user/logout').then(() => {
		router.push('/login')
		//清空
		UserLogin.token = undefined
		UserLogin.isLogin = false
	})
}

init()
</script>
<style scoped>
:deep(.avatar-uploader .el-upload)  {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover)   {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon )  {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
}

.container {
	width: 100%;
	height: 100vh;
	background-color: #ecf5f8;
}

.tag {
	display: block;
	margin-bottom: 10px;
}
</style>
